<template>
<div class="like">
  <div class="like-title">
    <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" />
          猜你喜欢
  </div>
  <ul>
    <router-link v-for="item of list" :key="item.id" :to="'/detail/' + item.id" tag="li">
      <div class="like-pic">
        <img :src="item.src" :alt="item.title" />
        <div v-if="item.flag==1" class="mp-like-tag" style="background-image:url(https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png)">随买随用</div>
        <div v-else-if="item.flag==2" class="mp-like-tag" style="background-image:url(https://img1.qunarzz.com/piao/fusion/1802/52/b9080e45b69b4f02.png)">可订明日</div>
      </div>
      <div class="like-con">
        <h2>{{item.title}}</h2>
        <p>
          <span class="star iconfont">&#xe62e; &#xe62e; &#xe62e; &#xe62e; &#xe62e;</span>
          <span class="num">{{item.num}}条评论</span>
        </p>
        <dl>
          <dt>
            <span>￥<em>{{item.price}}</em></span>起
          </dt>
          <dd>{{item.add}}</dd>
        </dl>
      </div>
    </router-link>
  </ul>
</div>
</template>

<script>
export default {
  props: {
    list: Array
  }
}
</script>

<style scoped>
.like{width:100%;}
.like-title{height:.47rem;line-height:.47rem;padding:0.2rem 0;}
.like-title img{width:.4rem;margin-left:.1rem}
ul li{ padding:.2rem; overflow: hidden; border-bottom: 1px solid #EAEAEA;}
ul li .like-pic{ width:2rem; height:2rem; float:left; margin-right:.2rem; position: relative;}
ul li .like-pic img{ width:100%; height:100%; position: absolute; top: 0; left: 0;}
.mp-like-tag{position:absolute;top:0;left:0;width:1.02rem;height:.38rem;background-size:100%;color:#fff;font-size:.2rem;line-height:.38rem;text-indent:.04rem}
.like-con{ font-size:.24rem;}
.like-con h2{font-size:.32rem; margin-top: .3rem;}
.like-con p{ padding: .2rem 0;}
.like-con p .star{color: #ffb436; font-size:.24rem; margin-right: .5rem;}
.like-con p .num{ color:#666;}
.like-con dl {line-height:.4rem; margin-top: .2rem; overflow: hidden;}
.like-con dl dt {color: #ff8300; float:left;}
.like-con dl dt em{ font-size:.4rem; color: #ff8300;}
.like-con dl dd{ float:right;}
</style>
